<template>
    <div>
        <p>
           按实际付款的撒娇的佛IPA手机发动is金佛家设计大方
        </p>
        <div v-if="isShow">
            <button @click="handleClickshow">t编辑</button>
            <Cart2 :info='cardOne'></Cart2>
        </div>
        <div v-else>
            <button @click="handleClickSave">保存</button>
            <button @click="handleClickNo">取消</button>
            <Cart1 :info='cardOne' @changeText="changeText"></Cart1>
        </div>

        <div v-if="isChange">
            <button @click="handleClicEdi">编辑1</button>
            <Cart3></Cart3>
        </div>
        <div v-else>
            <button @click="handleClickSave1">保存</button>
            <button @click="handleClickNo1">取消</button>
             <button @click="useFatherFun">父组件</button>
            <Cart4 @useFatherFun='useFatherFun' :userData="userInfo" ref='cart4'></Cart4>
        </div>

    </div>
</template>

<script>
import Cart2 from "@/components/cart/cart2";
import Cart1 from "@/components/cart/cart1";
import Cart3 from "@/components/cart/cart3";
import Cart4 from "@/components/cart/cart4";
export default {
  components: {
    Cart2,
    Cart1,
    Cart3,
    Cart4
  },
  data() {
    return {
      isShow: true,
      isChange: true,
      cardOne: `这是top卡片`,
      cardOneText: ``,
      cnan: null,
       userInfo:'主卧室'
    };
  },
  created() {
    //    获取后台数据
    let data = `这是卡片bottom3333333333`;
    this.getCard3Data(data);
  },
  computed: {
    falg() {
      return this.$store.state.userInfo.falg;
    }
  },
  mounted() {},

  methods: {
    useFatherFun() {
      console.log(`这是父组件方法`);
      this.$refs.cart4.childrenFun()
    },
    getCard3Data(data) {
      this.$store.commit(`changeText`, data);
    },
    changeText(value) {
      console.log(`父组件`, value);
      this.cardOneText = value;
    },
    handleClickshow() {
      this.isShow = false;
      console.log(this.isShow);
    },
    handleClickSave() {
      this.isShow = true;
      // 向后台发起请求
      this.cardOne = this.cardOneText;
      console.log(this.isShow);
    },
    handleClickNo() {
      this.isShow = true;
      console.log(this.isShow);
    },
    handleClicEdi() {
      this.isChange = false;
      console.log(`我是编辑1`, this.isChange);
    },
    handleClickSave1() {
      this.isChange = true;
      this.$store.commit(`changeText`, this.$store.state.cardTextData);
      console.log(this.isChange);
    },
    handleClickNo1() {
      this.isChange = true;
      console.log(this.isChange);
    }
  }
};
</script>

<style>
</style>z